<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>坐席工作台</title>
    <link rel="stylesheet" type="text/css" href="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/1.0.1/main.min.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .mini-workbench {
            position: fixed;
            border-radius: 100%;
            height: 50px;
            line-height: 50px;
            width: 50px;
            text-align: center;
            background: #00c1de;
            color: white;
            cursor: pointer;
            top: 44px;
            right: 0px;
        }

        .test-call {
            cursor: pointer;
            color: #00c1de;
        }

        #workbench {
            font-size: 14px;
            color: #4F5357;
            position: fixed;
            background: #FFFFFF;
            border: 1px solid #D7D8D9;
            box-shadow: 0 1px 4px 0 rgba(55, 61, 65, 0.14);
            right: 50px;
            transition: all .3s;
        }

        #test {
            position: fixed;
            width: 265px;
            background: #FFFFFF;
            top: 150px;
            right: 400px;
        }
    </style>
</head>

<body>
<div id="app">
    <div onclick="openWorkbench()" class="mini-workbench">
        云呼
    </div>
    <div id="workbench"></div>
</div>

<h1 th:inline="text">Hello [[${loginName}]]</h1>
<p>返回<a th:href="@{/home}">home</a>页</p>
<p>Click
    <a th:href="@{/customers}">here</a> to see a customer list.</p>

<hr/>

<p>当前坐席</p>
<div th:if="${loginName} != null">
    <p th:inline="text">坐席登录名: [[${loginName}]]</p>
</div>

<hr/>

<form th:action="@{/logout}" method="post">
    <input type="submit" value="Sign Out"/>
</form>
<div>
    <h2 onclick="call()" class="test-call">拨号测试</h2>
    <button onClick="applyBreak()">测试小休</button>
    <div id="test"></div>
</div>
<script type="text/javascript" src="//g.alicdn.com/cloudcallcenter/SIPml/0.1.9/SIPml-api.js"></script>
<script type="text/javascript" src="//g.alicdn.com/cloudcallcenter-voip/web-agentbar-sdk/1.1.3/index.js"></script>
<script type="text/javascript"
        src="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/1.1.2/workbenchSdk.min.js"></script>
<script th:inline="javascript">
    !(function (win) {
        win.workbench = new win.WorkbenchSdk({
            dom: 'workbench',
            regionId: 'cn-shanghai',
            instanceId: [[${instanceId}]],
            ajaxPath: '/aliyun/ccc/api',
            ajaxMethod: 'post',
            header: true,
            useOpenApiSdk: false,
            defaultVisible: false,
            defaultMainContentVisible: false,
            onErrorNotify: function (error) {
                console.warn(error)
            },
            onCallComing: function (aa, bb, cc, dd) {
                console.log(aa, bb, cc, dd);
                window.open("https://127.0.0.1:8443/customer/phoneNumber/135012345678")
            },
            onCallDialing: function (aa, bb, cc, dd) {
                console.log(aa, bb, cc, dd);
            },
            onStatusChange: function (code, lastCode, context) {
                console.log(code, lastCode, context);
            },
            onHangUp: function (type) {
                console.log("call onHangUp:" + type);
                win.workbench.ready();
            }


        })
        //面板展示开关
        win.workbenchOpen = false;
        openWorkbench = function () {
            var workbenchWrapper = document.querySelector("#workbench");
            var floater = document.querySelector(".mini-workbench");
            win.workbench.changeVisible(win.workbenchOpen);
            if (!win.workbenchOpen) {
                workbenchWrapper.style.display = 'none';
                floater.innerHTML = '云呼';
            } else {
                workbenchWrapper.style.display = 'block';
                floater.innerHTML = 'X';
            }
            win.workbenchOpen = !win.workbenchOpen
        }

        call = function () {
            var input = prompt("请输入要拨打的电话", "18057138912");
            win.workbench.call(input);
            openWorkbench();
        }

        applyBreak = function () {
            var yes = prompt("请输入：小休id-小休名称（请不要输入0-default)", "1-wc");
            if (yes) {
                var id = yes.split("-")[0] || 1;
                var name = yes.split("-")[1] || 'wc';
                win.workbench.applyForBreak(id, name);
            }
        }

    })(window)

</script>
</body>

</html>